<template>
    <div>
      <h2>Count</h2>
      <h3>movie的电影总共有{{ movieList.length }}个</h3>
      <p>我的count的值是{{ count }}</p>
      <!-- 直接使用插值语法拿到store中的getters中的值 -->
      <!-- <p>我的count的平方很的值是{{ $store.getters.countSqrt }}</p> -->
      <p>我的count的平方很的值是{{ countSqrt }}</p>
      <p>我的num的值是{{ num }}</p>
  
      <button @click="increament">累加count的值</button>
      <button @click="increamentN({ n: 3 })">count的值加n</button>
      <button @click="incrementWait">等1s再加</button>
      <button @click="incrementNWait({ n: 3 })">等1s再加n</button>
    </div>
  </template>
  
  <script>
  export default {
    name: "Count",
    mounted() {
      console.log(this);
    },
    computed: {
      // ...mapState("count", ["count", "num"]),
      count() {
        return this.$store.state.count.count;
      },
      num() {
        return this.$store.state.count.num;
      },
      movieList() {
        return this.$store.state.movie.movieList;
      },
      // ...mapGetters("count", ["countSqrt"]),
      countSqrt() {
        return this.$store.getters["count/countSqrt"];
      },
    },
    methods: {
      // ...mapMutations("count", ["increament", "increamentN"]),
      increament() {
        this.$store.commit("count/increament");
      },
      increamentN(payload) {
        this.$store.commit("count/increamentN", payload);
      },
      // ...mapActions("count", ["incrementWait", "incrementNWait"]),
      incrementWait() {
        this.$store.dispatch("count/incrementWait");
      },
      incrementNWait(payload) {
        this.$store.dispatch("count/incrementNWait", payload);
      },
    },
  };
  </script>
  
  <style></style>